import React from 'react'
import './login.scss'
import { Form, Input, Button, Card, message } from 'antd';
import axios from '../../aixos'
import { loginAction } from '../../redux/actionCreator/user'
// import { routerAction } from '../../redux/actionCreator/router'
import { connect } from 'react-redux';
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

const Login = (props) => {
  const onFinish = (values) => {
    console.log('Success:', values);
    axios.post('/login', values).then(res => {
      console.log(res)
      props.loginAction(res.data)
      console.log(props.user)
      // props.routerAction()
      // setTimeout(() => {
      //   props.history.push('/')
      // }, 3000)
      window.location.href = '/'
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const particlesInit = async (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };

  const particlesLoaded = (container) => {
    console.log(container);
  };

  const superAdmin = () => {
    message.info('请联系超级管理员获取账户信息！')
  }
  return (
    <>
      <div className='login'>
        <div className='card'>
          <Card.Grid style={{
            width: '600px',
            textAlign: 'center',
            background: '#fff',
            position: 'relative',
            // top: '200px',
            // left: '50%',
            // transform: 'translateX(-50%)',
            zIndex: 999,
            borderRadius: '10px',
            boxShadow: '0 0 5px #eee',
          }}>
            <h2>博客后台管理系统</h2>
            <Form
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input placeholder='请输入用户名' />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
              >
                <Input.Password placeholder='请输入密码' />
              </Form.Item>
              {/* <Form.Item
                wrapperCol={{
                  offset: 0,
                  span: 24,
                }}
              >
                <div className='user-list'>
                  <div className='tip'>
                    <div>游客登陆：</div>
                    <div>
                      <div>用户名：123456</div>
                      <div>密&nbsp;&nbsp;&nbsp;&nbsp;码：123456</div>
                    </div>
                  </div>
                  <div className='tip'>
                    <div>普通管理员：</div>
                    <div>
                      <div>用户名：55555</div>
                      <div>密&nbsp;&nbsp;&nbsp;&nbsp;码：55555</div>
                    </div>
                  </div>
                </div>
              </Form.Item> */}
              <Form.Item
                wrapperCol={{
                  offset: 0,
                  span: 24,
                }}
              >
                <div className='btns'>
                  <Button className='btn' htmlType="submit">
                    登录
                  </Button>
                  <Button className='btn' type="primary" onClick={()=>onFinish({
                    username: '123456',
                    password: '123456'
                  })}>
                    游客登录
                  </Button>
                  <Button className='btn' type="primary" onClick={()=>onFinish({
                    username: '55555',
                    password: '55555'
                  })}>
                    普通管理员
                  </Button>
                  <Button className='btn' type="primary" onClick={superAdmin}>
                    超级管理员
                  </Button>
                </div>
              </Form.Item>
            </Form>
          </Card.Grid>
        </div>
      </div>
      <Particles
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
        options={{
          background: {
            color: {
              value: "#558c9f",
            },
          },
          fpsLimit: 120,
          interactivity: {
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: "#ffffff",
            },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
              direction: "none",
              enable: true,
              outModes: {
                default: "bounce",
              },
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              value: { min: 1, max: 5 },
            },
          },
          detectRetina: true,
        }}
      />
    </>
  );
};

const mapDispatchToProps = {
  loginAction,
  // routerAction
}

export default connect((state) => {
  return {
    user: state
  }
}, mapDispatchToProps)(Login);
